<template>
    <el-dialog v-model="visible" title="选择设备" width="1100" @close="handleClose" destroy-on-close
        :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="form-card ">
            <el-form :model="queryParams" :inline="true" label-width="48px">
                <el-form-item label="编码" prop="code">
                    <el-input v-model="queryParams.code" placeholder="输入编码" />
                </el-form-item>
                <el-form-item label="名称" prop="meterName">
                    <el-input v-model="queryParams.meterName" placeholder="输入名称" />
                </el-form-item>
                <el-form-item label="种类" prop="meterType">
                    <el-select v-model="queryParams.meterType" placeholder="选择种类" style="width: 170px;">
                        <el-option v-for="dict in sys_device_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class='table-box'>
            <el-table v-loading="loading" row-key="id" :data="tableData" @select="handleSelectChange"
                @select-all="handleSelectionAllChange" height="50vh" ref="deviceSettingTable">
                <el-table-column type="selection" width="55" align="center" row-key="id" :reserve-selection="true" />
                <el-table-column label="器具编码" prop="code" show-overflow-tooltip align="center" />
                <el-table-column label="器具名称" prop="meterName" show-overflow-tooltip align="center" />
                <el-table-column label="器具种类" prop="meterType" :formatter="meterTypeFormat" show-overflow-tooltip
                    align="center" />
                <!-- <el-table-column label="规格型号" prop="modelNumber" show-overflow-tooltip align="center" /> -->
                <el-table-column label="配电室" prop="installactionLocation" show-overflow-tooltip align="center" />
                <!-- <el-table-column label="状态" width="85" prop="meterStatus" :formatter="meterStatusFormat" show-overflow-tooltip
                    align="center" /> -->
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        <div slot="footer" class="text-right">
            <el-button type="primary" @click="handleOk">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
        </div>

    </el-dialog>

</template>
<script setup>
import { listImplement } from '@/api/modelConfiguration/businessModel'
import { ref } from 'vue';
let visible = ref(false)
let { proxy } = getCurrentInstance()
const { sys_device_type } = proxy.useDict("sys_device_type");
const { meter_status } = proxy.useDict("meter_status");

// 种类字典翻译
function meterTypeFormat(row, column) {
    return proxy.selectDictLabel(sys_device_type.value, row.meterType);
}
// 状态字典翻译
function meterStatusFormat(row, column) {
    return proxy.selectDictLabel(meter_status.value, row.meterStatus);
}

let tableData = ref([])
let total = ref(0);
let queryParams = ref({
    code: null,
    meterName:null,
    meterType: null,
    pageNum: 1,
    pageSize: 10,
})
let loading = ref(false)
let deviceSettingTable = ref(null)

function getList() {
    loading.value = true;
    listImplement(queryParams.value).then(response => {
        tableData.value = response.rows
        total.value = response.total
        loading.value = false
        nextTick(function () {
            deviceSettingTable.value.data.forEach(rowData => {
                let exist = selectedDevice.value.filter(f => f.id === rowData.id).length;
                if (exist > 0) {
                    deviceSettingTable.value.toggleRowSelection(rowData, true);
                }
            });
        });
    })
}

function handleClose() {
    visible.value = false
}
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}
function resetQuery() {
    queryParams.value = {
        code: null,
        meterType: null,
        meterName:null,
        pageNum: 1,
        pageSize: 10,
    }
    getList();
}
let selectedDevice = ref([])
function handleOpen(selectRow) {
    selectedDevice.value = JSON.parse(JSON.stringify(selectRow))
    visible.value = true
    queryParams.value = {
        pageNum: 1,
        pageSize: 10,

    }
    getList()
}

//判断一下 是全选还是全选取消
function formatterSelect(selection, data) {
    let idMap = {};
    selection.forEach(item => {
        idMap[item.id] = true;
    });
    let allIn = data.every(item => idMap.hasOwnProperty(item.id));
    return allIn;
}
function handleSelectionAllChange(selection) {
    if (formatterSelect(selection, tableData.value)) {
        selection.forEach(row => {
            let rowStatus = selectedDevice.value.filter(f => f.id == row.id).length;
            if (rowStatus === 0) {
                selectedDevice.value.push({
                    "id": row.id,
                    "code": row.code,
                    "meterName": row.meterName
                });
            }
        });
    } else {
        selectedDevice.value = selectedDevice.value.filter(f => {
            return !tableData.value.some(s => s.id == f.id);
        });
    }
}

function handleSelectChange(selection, row) {
    let rowStatus = selection.filter(f => f.id === row.id).length;
    if (rowStatus > 0) {
        selectedDevice.value.push({
            "id": row.id,
            "code": row.code,
            "meterName": row.meterName
        });
    } else {
        selectedDevice.value = selectedDevice.value.filter(f => f.id !== row.id);
    }
}

function handleOk() {
    emit('deviceConfirmSelect', selectedDevice.value)
    visible.value = false
}
defineExpose({ handleOpen });
let emit = defineEmits(['deviceConfirmSelect'])
</script>



<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>
